<template>
  <div class="consumer-page activity-list-page">
    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item>Feedback</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="container-padding">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"
                 class="demo-ruleForm main-search-box">

          <el-form-item label="Status" style="width: 200px;margin-right: 10px">
            <el-select style="width: 200px" v-model="searchForm.stopStatus" placeholder="">
              <el-option v-for="i in statusOption" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="User ID" style="width: 200px;">
            <el-input v-model="searchForm.customerId" placeholder=""></el-input>
          </el-form-item>

          <el-form-item style="margin-top: 37px;margin-left: 30px;">
            <el-button @click="getList(1)">Search</el-button>
          </el-form-item>

        </el-form>
      </div>

      <!--list-->
      <div class="list-items-box">
        <!--表格-->
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">


          <el-table-column
            prop=""
            label="Edit Status"
            align="center"
            width="100">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="editBusStop(scope.row.id)">{{$t('m.Edit')}}</el-button>
            </template>
          </el-table-column>

          <!--status-->
          <el-table-column
            prop="status"
            label="Status"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              <div>{{getStatus(scope.row.status)}}</div>
            </template>
          </el-table-column>


          <!--ID-->
          <el-table-column
            prop="id"
            label="ID"
            align="center"
            min-width="80">
          </el-table-column>

          <!--Category-->
          <el-table-column
            prop="categoryName"
            label="Category"
            align="center"
            min-width="100">
            <!--<template slot-scope="scope">-->
              <!--<div class="list-notes">{{getCategroyItem(scope.row.category)}}</div>-->
            <!--</template>-->
          </el-table-column>


          <!--Type-->
          <el-table-column
            prop="typeName"
            label="Type"
            align="center"
            min-width="100">
          </el-table-column>


          <!--Feedback-->
          <el-table-column
            prop="feedbackValue"
            label="Feedback"
            align="center"
            min-width="200">
          </el-table-column>

          <!--Facebook Name-->
          <el-table-column
            prop="facebookName"
            label="Facebook Name"
            align="center"
            min-width="150">
          </el-table-column>

          <!--Facebook ID-->
          <el-table-column
            prop="facebookId"
            label="Facebook ID"
            align="center"
            min-width="150">
          </el-table-column>

          <!--App/PC web/Mobile web-->
          <el-table-column
            prop=""
            label="App/PC web/Mobile web"
            align="center"
            min-width="190">
          </el-table-column>

          <!--Photo Count-->
          <el-table-column
            prop="photoCount"
            label="Photo Count"
            align="center"
            min-width="120">
          </el-table-column>

          <!--User ID-->
          <el-table-column
            prop="customerId"
            label="User ID"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Notes-->
          <el-table-column
            prop="notes"
            label="Notes"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Created Date-->
          <el-table-column
            label="Created Date"
            align="center"
            min-width="140">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.createDatetime, 'listedDate')}}</p>
            </template>
          </el-table-column>

          <!--Created By-->
          <el-table-column
            prop="customerName"
            label="Created By"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Updated Date-->
          <el-table-column
            label="Updated Date"
            align="center"
            min-width="140">
            <template slot-scope="scope">
              <p>{{dateFormat(scope.row.updateDateTime, 'listedDate')}}</p>
            </template>
          </el-table-column>

          <!--Updated By-->
          <el-table-column
            prop="solvedBy"
            label="Updated By"
            align="center"
            min-width="120">
          </el-table-column>

        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 15px;text-align: center;">
          <el-pagination
            @size-change="handleChangeSize"
            @current-change="handleChangePage"
            :current-page="pageData.pageNo"
            :page-size="pageData.pageSize"
            :page-sizes="[10, 20, 50, 100, 500]"
            :page-count="pageInfo.totalPages"
            :total="pageInfo.totalCount"
            layout="total, prev, pager, next, jumper, sizes">
          </el-pagination>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

  import {searchFeedbackList} from '../../api/mgc_api.js'
  import qs from 'qs';

  export default {
    name: 'busStopList',
    data() {
      return {
        searchForm: {
          stopStatus: 1,
          customerId: '',
        },
        categorys: [
          {
            "id": 4,
            "name": "Bus"
          },
          {
            "id": 2,
            "name": "Food"
          },
          {
            "id": 1,
            "name": "Movie"
          },
          {
            "id": 5,
            "name": "Others"
          },
          {
            "id": 3,
            "name": "Property"
          }
        ],
        types: [
          {
            "value": 1,
            "text": "Software error"
          },
          {
            "value": 3,
            "text": "Feature request"
          },
          {
            "value": 4,
            "text": "Service"
          },
          {
            "value": 5,
            "text": "Others"
          }
        ],
        statusOption: [
          {
            label: 'Active',
            value: 1
          }, {
            label: 'Closed',
            value: 2
          }
        ],
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableLoading: false,
        tableData: [],
      }
    },
    methods: {
      handleSelectionChange(val) {
        this.multipleSelection = val
        // [{row当前所有数据，developmentId}]
      },
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      editBusStop (id) {
        this.$router.push({
          path: '/feedBackEdit',
          query: {
            id: id
          }
        })
      },
      dateFormat(value, str) {
        if (!value) return
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        if (str == 'listedDate') {
          var t = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s
          return t
        }
        if (str == 'Date') {
          var tDate = d + '-' + m + '-' + Y
          return tDate;
        }
        if (str == 'made') {
          var amOrpm = '';
          if (H > 12) {
            amOrpm = ' pm'
          } else {
            amOrpm = ' am'
          }
          var tMade = d + '-' + m + '-' + Y + '  ' + H + ':' + i + amOrpm
          return tMade;
        }
        else if ('editactivity') {
          var es = Y + '-' + m + '-' + d
          return es
        }
        else {
          var ts = m + '-' + Y
          return ts
        }
      },
      getStatus(value) {
        if (value == 1) {
          return 'Active';
        } else if (value == 2) {
          return 'Closed';
        }
      },
      getCategroyItem (it) {
        let str = ''
        this.categorys.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      // message alert 用于前端错误提示信息
      messageToastErr(msg) {
        this.$message({
          showClose: true,
          message: msg,
          duration: 1500,
          type: 'error'
        })
      },
      getList(pageNum) {

        this.tableLoading = true;

        if (pageNum == 1) {
          this.pageData.pageNum = 1;
        }

        let searchForm = {
          status: this.searchForm.stopStatus,
          createUserId: this.searchForm.customerId,
        };

        qs.stringify(searchForm)

        searchFeedbackList(Object.assign(searchForm, this.pageData)).then((res) => {

          this.tableData = res.data.object.infos.list || []

          // 分页信息配置
          this.pageInfo.totalPages = res.data.object.infos.pages
          this.pageInfo.totalCount = res.data.object.infos.total

          this.tableLoading = false;

        }).catch((e) => {
          console.log(e)
          this.tableLoading = false;
        })
      },
    },
    mounted() {
      this.getList()
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    /*padding-top: 20px;*/
    border-bottom: 1px solid #eee;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .more-box, .list-items-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list-items-box {
    /*margin-right: 10%;*/
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .change-status {
    font-size: 14px;
    margin-right: 10px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .container-padding {
    padding: 0 40px;
  }

  .list-notes {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .activity-list-page .el-checkbox + .el-checkbox {
    margin-left: 0 !important;
    margin-right: 30px !important;
  }
</style>
